<template>
 <div class="page-container">
     <div class="common-content">
         <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
         <div class="search-wrap">
             <el-form :inline='true' style="padding-top:20px" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
<!--                 <el-form-item label="主键">-->
<!--                     <el-input v-model="searchFilters.id" placeholder="请输入主键"></el-input>-->
<!--                 </el-form-item>-->
                    <el-form-item label="BD部门">
                     <el-input v-model="searchFilters.bdName" placeholder="请输入bd编码"></el-input>
                 </el-form-item>
                 <el-form-item label="BD编码">
                     <el-input v-model="searchFilters.bdCode" placeholder="请输入bd编码"></el-input>
                   <!-- <el-select clearable placeholder="选择BD编码" v-model="searchFilters.bdName">
                     <el-option v-for="(item,index) in deptList" :key="index" :label="item.code"
                                :value="item.code"></el-option>
                   </el-select> -->
                 </el-form-item>
                 <!-- <el-form-item label="平台编码">
                     <el-input v-model="searchFilters.platformCode" placeholder="请输入平台编码"></el-input>
                 </el-form-item> -->
                   <el-form-item label="平台"  prop="platformName" >
                        <el-select clearable placeholder="选择平台编码" v-model="searchFilters.platformName">
                            <el-option v-for="(item,index) in platformList" :key="index" :label="item.name"
                                    :value="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                   <el-form-item label="平台编码"  prop="platformCode" >
                        <el-select clearable placeholder="选择平台编码" v-model="searchFilters.platformName">
                            <el-option v-for="(item,index) in platformList" :key="index" :label="item.code"
                                    :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                 <el-form-item label="关系类型">
                     <!-- <el-input v-model="searchFilters.type" placeholder="请输入关系类型"></el-input> -->
                       <el-select v-model="searchFilters.type" clearable placeholder="选择类型">
                        <el-option label="预算关系" :value="1"></el-option>
                        <el-option label="结算关系" :value="2"></el-option>

                    </el-select>
                 </el-form-item>
                 <!-- 搜索区域按钮-查询,重置 -->
                 <div class="tool-wrap">
                     <div class="left-area">
                         <el-button-group>
                             <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                             <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                             <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                             <!-- <el-button type="primary" size="small" @click="freezeApplicationForm(1)" >冻结申请</el-button>
                            <el-button type="primary" size="small" @click="thawApplicationForm(1)">解冻申请</el-button>
                            <el-button type="primary" size="small" @click="advanceApplyForm(1)">提前</el-button>
                            <el-button type="primary" size="small" @click="postponeApplyForm(1)">延期申请</el-button> -->
                            <el-button type="primary" size="small" @click="auditForm(1)" v-show="this.folg">审核</el-button>
                         </el-button-group>
                     </div>
                 </div>
                  <el-tabs v-model="activeName" @tab-click="handleClick" >
                    <el-tab-pane label="已审核" name="first"></el-tab-pane>
                    <el-tab-pane label="预审核" name="second"></el-tab-pane>
                </el-tabs>
                  <!-- 冻结申请 -->
                <el-dialog title="冻结申请" :visible.sync="freezeApplication">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="申请状态"  width="100%" prop="sts">
                        <el-select v-model="form.sts" auto-complete="off">
                          <el-option label="流入冻结,流出正常" value="-2"></el-option>
                          <el-option label="双向冻结" value="-3"></el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="freezeApplication = false">取 消</el-button>
                    <el-button type="primary" @click="freezeApplicationForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
                   <!-- 解冻申请  -->
                 <el-dialog title="解冻申请" :visible.sync="thawApplication">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="申请状态"  width="100%" prop="sts">
                        <el-select v-model="form.sts" auto-complete="off">
                         <el-option label="流入正常,流出冻结" value="2"></el-option>
                         <el-option label="启用" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="申请原因"  width="100%"  prop="applierReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="thawApplication = false">取 消</el-button>
                    <el-button type="primary" @click="thawApplicationForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
                 <!-- 延期申请 -->
                 <el-dialog title="延期申请" :visible.sync="delayApply">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="延期申请日期"  width="100%" prop="endTime">
                        <el-date-picker v-model="form.endTime" type="datetime" style="width: 15rem;"  placeholder="请选择结束日期"></el-date-picker>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="延期申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="delayApply = false">取 消</el-button>
                    <el-button type="primary" @click="postponeApplyForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
                <!-- 提前申请 -->
                <el-dialog title="提前申请" :visible.sync="advanceApply">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="提前申请日期"  width="100%" prop="endTime">
                        <el-date-picker v-model="form.endTime" type="datetime" style="width: 15rem;"  placeholder="请选择结束日期"></el-date-picker>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="提前申请原因"  width="100%"  prop="applyReason">
                        <el-input v-model="form.applyReason" style="width: 30rem;" type="textarea" auto-complete="off"  maxlength="150" show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="advanceApply = false">取 消</el-button>
                    <el-button type="primary" @click="advanceApplyForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
                 <!-- 审核 -->
                  <el-dialog title="审核" :visible.sync="auditApplication">
                    <el-form :model="form" ref="form" :rules="rules">
                    <el-form-item label="审核状态"  width="100%" prop="auditSts">
                        <el-select v-model="form.auditSts" auto-complete="off">
                            <el-option label="审核通过" value="1">审核通过</el-option>
                            <el-option label="审核拒绝" value="2">审核拒绝</el-option>
                        </el-select>
                    </el-form-item>
                    <br>
                    <br>
                    <el-form-item label="审核原因"  width="100%"  prop="auditReason">
                        <el-input v-model="form.auditReason" style="width: 30rem;"  type="textarea"    auto-complete="off"   maxlength="150"   show-word-limit></el-input>
                    </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                    <el-button @click="auditApplication = false">取 消</el-button>
                    <el-button type="primary" @click="auditForm(2)">确 定</el-button>
                    </div>
                </el-dialog>
                 <!-- 表格数据部分 -->
                 <div class="table-wrap">
                     <jic-table :height="350" :operationWidth=300 :tableList="tableList"
                     :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation=true
                     :showEditOperation=true :showBatchDelete=false :showSelection=true :showIndex=false
                     :showDeleteOperation=true @findPage="findPage" @handleDetail="handleDetail" @handleDelete="handleDelete"
                     @handleEdit="handleEdit" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange"  @selectionChange="selectionChange"
                     ref="jicTable"></jic-table>
                 </div>
             </el-form>
         </div>
     </div>
 </div>
</template>

<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';

//二.数据输出区
export default {

    //===== 注册组件 =====
    components: {
        jicTable,
    },

    //===== 数据初始化区=====
    data() {
        return {

            //===== 公共数据初始化 =====
            selectionChangeList:[],
            activeName:'first',//默认查询全部信息（主表）
            freezeApplication:false,//冻结申请
            thawApplication:false,//解冻申请
            delayApply:false,//延期申请
            advanceApply:false,//提前申请
            auditApplication:false,//审核
            selsts: null,//分辨主表与申请表的标识
            pageIndex: 0, //当前页数：首页；
            pageSize: 10, //每页记录数：10条记录；
            totalSize: 0, //总记录数：返回数据总条数
            deptList:[],
             folg:null,//审核预审核标识按钮
            platformList:[],
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [], // 表格列表数据
            searchSize: 'mini',
            form: {
                    id: null,
                    sts: null, //
                    applyReason: null, //冻结申请原因
                    endtime: null,//
                    auditSts:null,
                    auditReason:null,
                    },
            rules: {
                sts: [{required: true, message: "请选择该状态选项", trigger: "blur"}],
                applyReason: [{required: true, message: "请输入申请原因", trigger: "blur"}],
                auditSts: [{required: true, message: "请选择审核状态", trigger: "blur"}],
                auditReason: [{required: true, message: "请输入审批原因", trigger: "blur"}],
                endTime:[{required: true, message: "请选择时间", trigger: "blur"}]
                },

            //=====表格表头数据=====
            tableHeaderList: [
              // {
                    // prop: "id",
                    // label: "主键",
                    // minWidth: 100,
                    // formatter: null
                // },
                {
                    prop: "bdName",
                    label: "BD部门",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "bdCode",
                    label: "BD编码",
                    minWidth: 100,
                    formatter: null
                },
                 {
                    prop: "platformName",
                    label: "平台",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "platformCode",
                    label: "平台编码",
                    minWidth: 100,
                    formatter: null
                },


                {
                    prop: "type",
                    label: "关系类型",
                    minWidth: 100,
                    formatter: function (row, column, type, index) {
                        if (type == 0) {
                            return "无";
                        }else if (type == 1){
                          return "预算关系";
                        }else if(type ==2){
                          return "结算关系";
                        }
                    }
                },
            ],

            //=====搜索表单对应的数据对象初始化=====
            searchFilters: {
                id: null,
                bdCode: null,
                platformCode: null,
                type: null,
                bdName:null,
                platformName: null,
                bdName:null,
                platformName:null

            },
            //dialogVisible: false, //// 是否显示弹窗内容;
            //editDialogVisible1: false,//// 是否可编辑弹窗内容;
            //editLoading: false,////是否显示加载时动画效果;
        }
    },

    //===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
    mounted() {
        this.findPage();
        this.getDeptName();
        this. getPlatform();
    },

    //=====Vue.js 方法区=====
    methods: {
             /*tabs函数 */
    handleClick(tab, event){
      console.log(tab, event);
      this.findPage();
    },

  // 显示审核and提交
    auditForm(num){
        if(num == 1){
            let this_ = this;
            if (this_.selectionChangeList.length < 1) {
                this_.$message({message: "必须选中一条数据", type: "warning"});
                return false;
            }
            this_.form.id = this_.selectionChangeList[0].id;
            this_.auditApplication = true;
            }else if(num == 2){
            let this_ = this;
            this_.$refs.form.validate(valid => {
                if (valid) {
                this.$confirm("确认提交吗？", "提示", {}).then(() => {
                    let this_ = this;
                    let params = {};
                    if (this_.auditApplication) {
                    params = Object.assign({}, this.form)
                     for(let i = 0; i <this.selectionChangeList.length; i++){
                        params.id = this.selectionChangeList[i].id;
                         this.utils.request.submitConfBdPlatfromRelaApply(params, function(res) {
                            if (res.code == "0000") {
                            this_.dataForm = {};
                            this_.findPage(null);
                            this_.auditApplication = false;
                            this_.$message({ message: "操作成功", type: "success" });
                            } else {
                            this_.$message({
                                message: "操作失败, " + res.msg,
                                type: "error"
                            });
                            }
                        });
                        }
                     }

                });
                }
            });
            }
    },

//获取部门信息
      getDeptName() {
        let this_ = this
        //let param = this.dataForm;
        this.utils.request.DepartmentNameInquiry({}, function (res) {
          this_.deptList = res.data
          console.log(this_.deptList)
        });
      },
       getPlatform() {
        let this_ = this
       // let param = this.dataForm;
        this.utils.request.getPlatformName({}, function (res) {
          this_.platformList= res.data;
        });
      },
        //1.查询按钮：查询列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {};
            }

            this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
                if (this_.activeName == "second") {
                     this_.selsts = 1;
                         this.folg=true;
                     this.utils.request.findConfBdPlatfromRelaApplyPage(this_.searchFilters, function (res) {
                        if (res.code === "0000") {
                            this_.tableList = res.data.list;
                            this_.totalSize = Number(res.data.total);
                        } else {
                            this_.tableList = [];
                            this_.totalSize = 0;
                        }
                    });

                }else{
                this_.selsts = 0;
                     this.folg=false;
                 this.utils.request.findConfBdPlatfromRelaPage(this_.searchFilters, function (res) {
                        if (res.code === "0000") {
                            this_.tableList = res.data.list;
                            this_.totalSize = Number(res.data.total);
                        } else {
                            this_.tableList = [];
                            this_.totalSize = 0;
                        }
                    });
              }
        },

        // 2.重置按钮：无条件查询搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 3.详情按钮对应的方法
        handleDetail(params) {
            this.$router.push({
                path: "/ConfBdPlatfromRelaDetail/",
                query: {
                    id: params.row.id,
                    disabled: true,
                    selsts: this.selsts,
                    activeName: this.activeName
                }
            });
        },

        // 4.编辑按钮对应的方法
        handleEdit(params) {
            this.$router.push({
                path: "/ConfBdPlatfromRelaDetail/",
                query: {
                    id: params.row.id,
                    disabled: false,
                    selsts: this.selsts,
                    activeName: this.activeName
                }
            });
        },

        // 5.跳转到新增记录页面；
        addForm(params) {
            params = {
                row: {
                    id: null
                }
            };
            this.$router.push({
                path: "/ConfBdPlatfromRelaDetail/",
                query: {
                    id: params.row.id,
                    disabled: false,
                      activeName: this.activeName
                }
            });
        },
        // 6.每页记录数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
        },
        selectionChange(params) {
        this.selectionChangeList = params.selections;
        },
        // 7.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 8.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 9.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },

        // 10.删除按钮：删除选中的记录
        handleDelete(data) {
            this.utils.request.deleteConfBdPlatfromRela({
                id: data.row.id
            }, res => {
                if (res.data) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.findPage();
                } else {
                    this.$message({
                        message: '删除失败',
                        type: 'warning'
                    });
                }
            });
        }
        //==========Vue.js自定义方法区==========

    },
}
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-form-item__content {
            height: 32px;
            line-height: 32px;
            width: 150px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
            width: 150px;
        }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
        width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}
</style>
